<!DOCTYPE html>
<html>
<head>
    <title>Customizing templates</title>

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
            <div id="example" class="k-content">
            <div class="demo-section">
                <h2>Select Customers</h2>
                <select id="customers"></select>
            </div>

            <div class="demo-section">
                <h2>Information</h2>
                <p>
                    Click the MultiSelect to see the customized appearance of the items.
                </p>
            </div>

            <script>
                $(document).ready(function() {
                    $("#customers").kendoMultiSelect({
                        dataTextField: "ContactName",
                        dataValueField: "CustomerID",
                        // define custom template
                        itemTemplate: '<img src=\"../../content/web/Customers/${data.CustomerID}.jpg\" alt=\"${data.CustomerID}\" />' +
                                      '<h3>${ data.ContactName }</h3>' +
                                      '<p>${ data.CompanyName }</p>',
                        tagTemplate:  '<img class="tag-image" src=\"../../content/web/Customers/${data.CustomerID}.jpg\" alt=\"${data.CustomerID}\" />' +
                                      '#: data.ContactName #',
                        dataSource: {
                            transport: {
                                read: {
                                    dataType: "jsonp",
                                    url: "http://demos.kendoui.com/service/Customers",
                                }
                            }
                        },
                        height: 300
                    });

                    var customers = $("#customers").data("kendoMultiSelect");
                    customers.wrapper.attr("id", "customers-wrapper");
                });
            </script>

            <style scoped>
                .demo-section {
                    width: 400px;
                    margin: 30px auto 50px;
                    padding: 30px;
                }
                .demo-section h2 {
                    text-transform: uppercase;
                    font-size: 1.2em;
                    margin-bottom: 10px;
                }
                .tag-image {
                    width: auto;
                    height: 18px;
                    margin-right: 5px;
                    vertical-align: top;
                }
                #customers-list .k-item {
                    overflow: hidden; /* clear floated images */
                }
                #customers-list img {
                    -moz-box-shadow: 0 0 2px rgba(0,0,0,.4);
                    -webkit-box-shadow: 0 0 2px rgba(0,0,0,.4);
                    box-shadow: 0 0 2px rgba(0,0,0,.4);
                    float: left;
                    margin: 5px 20px 5px 0;
                }
                #customers-list h3 {
                    margin: 30px 0 10px 0;
                    font-size: 2em;
                }
                #customers-list p {
                    margin: 0;
                }
            </style>
        </div>

</body>
</html>
